//创建两个画布
const canvas1 = document.createElement("canvas"); //展示图
const canvas2 = document.createElement("canvas"); //绘图
canvas1.width = canvas2.width = 800;
canvas1.height = canvas2.height = 400;
const contianer = document.querySelector("#container");
contianer.append(canvas1);
contianer.append(canvas2);

// 准备画笔
const ctx1 = canvas1.getContext("2d");
const ctx2 = canvas2.getContext("2d");
let shapeType = "line"; //默认图形为线条
let color = "#000000";
let lineWidth = 1;


//按钮事件
function preBtnEvent(){
    
    document.querySelectorAll('.shapeType').forEach((btn,i)=>{
         btn.onclick = function(){
             if(this.classList.contains('active')){
                 return ;
             }
             //切换active
             document.querySelector('.active').classList.remove('active') ;
             this.classList.add('active');
             
             //切换图形绘制类型
             shapeType = this.getAttribute('data') ;
         }
    });
     
    document.querySelector('#boldBtn').onchange = function(){
         lineWidth = this.value ;
    }
 
    document.querySelector('#colorBtn').onchange = function(){
         color = this.value ;
    }
 
    document.querySelector('#clearBtn').onclick = function(){
         ctx1.clearRect(0,0,canvas1.width,canvas1.height) ;
    }
 
    document.querySelector('#saveBtn').onclick = function(){
         const url = canvas1.toDataURL();
         const a = document.createElement('a') ;
         a.href = url ;
         a.download = '保存图片' ;
         a.click();
    }
 }
 preBtnEvent();
 